<template>
    <div>
        <van-nav-bar title="确认缴费" left-text="" left-arrow @click-left="onClickLeft" />
        <div style="
        padding: 0px 16px;
        height:620px;
        background-color: #f5f5f5;
        overflow-y: auto;
        ">
            <div style="
                 background-color: white;
                 margin-top: 12px;
                 width: 300px;
                 margin-left: 5px;
                 border-radius: 10px;
                 padding:15px;
                 font-size: 14px;
                 ">
                <p style="
                font-weight: 700;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                ">缴费信息</p>
                <p style="
                font-weight: 400;
                margin-top: 10px;
                font-style: normal;
                color: #7F7F7F;
                margin-top: 20px;    
                text-align: left;
                margin-top: 10px;
                width: 45%;
                display: flex;
                justify-content: space-between;
                ">就诊人<span style="color: #000000;">王小柯</span></p>

                <p style="
                font-weight: 400;
                margin-top: 10px;
                font-style: normal;
                color: #7F7F7F;
                margin-top: 20px;    
                text-align: left;
                margin-top: 10px;
                width: 70%;
                display: flex;
                justify-content: space-between;
                ">登记号<span style="color: #000000;">20200101001598Z</span></p>

                <p style="
                font-weight: 400;
                margin-top: 10px;
                font-style: normal;
                color: #7F7F7F;
                margin-top: 20px;    
                text-align: left;
                margin-top: 10px;
                width: 54.5%;
                display: flex;
                justify-content: space-between;
                ">就诊科室<span style="color: #000000;">门诊外一科</span></p>

                <p style="
                font-weight: 400;
                margin-top: 10px;
                font-style: normal;
                color: #7F7F7F;
                margin-top: 20px;    
                text-align: left;
                margin-top: 10px;
                width: 45%;
                display: flex;
                justify-content: space-between;
                ">开单医生<span style="color: #000000;">刘医师</span></p>

                <p style="
                font-weight: 400;
                margin-top: 10px;
                font-style: normal;
                color: #7F7F7F;
                margin-top: 20px;    
                text-align: left;
                margin-top: 10px;
                width: 74%;
                display: flex;
                justify-content: space-between;
                ">开单时间<span style="color: #000000;">2020-01-01 10:20:36</span></p>



            </div>
            <div style="
                 background-color: white;
                 margin-top: 12px;
                 width: 300px;
                 margin-left: 5px;
                 border-radius: 10px;
                 padding:15px;
                 font-size: 14px;
                 ">
                <p style="
                font-weight: 700;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                ">
                    订单信息</p>
                <p style="
                font-weight: 400;
                margin-top: 10px;
                font-style: normal;
                color: #7F7F7F;
                margin-top: 20px;    
                text-align: left;
                margin-top: 10px;
                width: 74%;
                display: flex;
                justify-content: space-between;
                ">订单编号<span style="color: #000000;">2021010156256894</span></p>
                <p style="
                font-weight: 400;
                margin-top: 10px;
                font-style: normal;
                color: #7F7F7F;
                margin-top: 20px;    
                text-align: left;
                margin-top: 10px;
                width: 74%;
                display: flex;
                justify-content: space-between;
                ">下单时间<span style="color: #000000;">2020-01-01 10:23:36</span></p>
                <p style="
                font-weight: 400;
                margin-top: 10px;
                font-style: normal;
                color: #7F7F7F;
                margin-top: 20px;    
                text-align: left;
                margin-top: 10px;
                width: 54.5%;
                display: flex;
                justify-content: space-between;
                ">支付金额<span style="color: red;font-size: 18px;">￥520.13</span></p>


            </div>
            <div style="
                 background-color: white;
                 margin-top: 12px;
                 width: 300px;
                 margin-left: 5px;
                 border-radius: 10px;
                 padding:15px;
                 font-size: 14px;
                 ">
                <p style="
                font-weight: 700;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                ">
                    支付方式</p>
                <br>
                <p style="
                font-weight: 400;
                margin-top: 10px;
                font-style: normal;
                color: #7F7F7F;
                margin-top: 20px;    
                text-align: left;
                margin-top: 10px;
                width: 94%;
                display: flex;
                justify-content: space-between;
                ">支付宝支付<span style="color: #000000;">
                        <input type="checkbox" name="" id="" v-model="flag">
                    </span></p>
                <br>
                <hr color="#f2f2f2">
                <p style="
                font-weight: 400;
                margin-top: 10px;
                font-style: normal;
                color: #7F7F7F;
                margin-top: 20px;    
                text-align: left;
                margin-top: 10px;
                width: 94%;
                display: flex;
                justify-content: space-between;
                ">微信支付<span style="color: #000000;">
                        <input type="checkbox" name="" id="" v-model="flag1">
                    </span></p>
                <br>

            </div>
            <button style="
             background-color: #0091FF;
                border-radius: 5px;
                width: 97%;
                height: 40px;
                margin-left: 5px;
                margin-top: 20px;
                color: white;
                font-size: 16px;
                border: none;
            " @click="jiaofei">确认缴费</button>

        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { showDialog, showConfirmDialog } from 'vant';
import { ref } from 'vue'
import axios from 'axios'
const router = useRouter()


const flag = ref(false)
const flag1 = ref(false)

const onClickLeft = () => {
    router.back()
}

const jiaofei = async () => {
    if (flag.value === false && flag1.value === false) {
        showDialog({
            title: '',
            message: '请选择支付方式哦',
        })
        return
    } else if (flag.value === true && flag1.value === false) {
        let data11 = {
            price: 520.13,
            name: "刘医师",
            time: "2020-01-01 10:20:36"
        }
        let { data } = await axios.post('http://127.0.0.1:3000/zhi', data11)
        if (data.code === 200) {
            showDialog({
                title: '',
                message: '支付成功',
            })
            router.push('/PaymentOrder')
        }
        // 跳转到支付宝沙箱
        window.open(data.result, "_blank")
    }else if (flag.value === false && flag1.value === true) {
        console.log(11111);
        
    }
}



</script>

<style scoped></style>